<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>分类参数</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <!-- 复制input中复合型输入框中的最后一个去除select -->
          <el-input clearable @clear="goodsList" placeholder="请输入内容" class="input-with-select" v-model="queryData.query">
            <el-button slot="append" icon="el-icon-search" @click="goodsList"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="$router.push('/goods/add')">添加商品</el-button>
        </el-col>
      </el-row>
      <el-table :data="goods" border stripe>
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column label="商品名称" prop="goods_name"></el-table-column>
        <el-table-column label="商品价格" width="80" prop="goods_price"></el-table-column>
        <el-table-column label="商品重量" width="80" prop="goods_weight"></el-table-column>
        <el-table-column label="创建时间" width="130" prop="add_time">
          <template slot-scope="scope">
            {{ scope.row.upd_time | formatDate }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="130">
        <template slot-scope="scope">
          <el-button icon="el-icon-edit" size="mini" type="primary" @click="editGoods(scope.row)"></el-button>
          <el-button icon="el-icon-delete" size="mini" type="danger" @click="deleteGoods(scope.row.goods_id)"></el-button>
        </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryData.pagenum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="queryData.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        background
        :total="total">
      </el-pagination>
      <!-- 编辑列表对话框 -->
      <el-dialog
        @close="resetEdit"
        title="编辑商品"
        :visible.sync="dialogVisible"
        width="50%"
        >
        <el-form ref="editFormRef" :model="editForm" :rules="rules" label-width="100px">
          <el-form-item label="商品名称" prop="goods_name">
            <el-input v-model="editForm.goods_name"></el-input>
          </el-form-item>
          <el-form-item label="商品价格" prop="goods_price">
            <el-input type="number" v-model="editForm.goods_price"></el-input>
          </el-form-item>
          <el-form-item label="商品重量" prop="goods_weight">
            <el-input type="number" v-model="editForm.goods_weight"></el-input>
          </el-form-item>
          <el-form-item label="商品数量" prop="goods_number">
            <el-input type="number" v-model="editForm.goods_number"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editFormSub">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      queryData: {
        // 搜索字段
        query: '',
        pagenum: 1,
        pagesize: 10
      },
      goods: [],
      total: 0,
      dialogVisible: false,
      editForm: {
        goods_name: '',
        goods_price: 0,
        goods_weight: 0,
        goods_number: 0
      },
      rules: {
        goods_name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' }
        ],
        goods_price: [
          { required: true, message: '请输入商品价格', trigger: 'blur' }
        ],
        goods_weight: [
          { required: true, message: '请输入商品重量', trigger: 'blur' }
        ],
        goods_number: [
          { required: true, message: '请输入商品数量', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.goodsList()
  },

  methods: {
    // 获取商品列表
    async goodsList () {
      const { data: res } = await this.$axios.get('goods', {
        params: this.queryData
      })
      console.log(res.data)
      if (res.meta.status !== 200) return this.$message.error('获取失败')
      this.goods = res.data.goods
      this.total = res.data.total
      this.$message.success('获取成功')
    },
    // 选择了每页多少条
    handleSizeChange (val) {
      // console.log(val)
      this.queryData.pagesize = val
      this.goodsList()
    },
    // 页码
    handleCurrentChange (val) {
      this.queryData.pagenum = val
      this.goodsList()
    },
    deleteGoods (id) {
      this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { data: res } = await this.$axios.delete('goods/' + id)
        if (res.meta.status !== 200) return this.$message.error('删除失败')
        this.goodsList()
        this.$message.success('删除成功!')
      }).catch(() => {
        this.$message('已取消删除')
      })
    },
    editGoods (row) {
      this.dialogVisible = true
      this.editForm = row
      // console.log(row)
    },
    editFormSub () {
      // console.log('111')
      this.$refs.editFormRef.validate(async flag => {
        if (!flag) return
        const { data: res } = await this.$axios.put('goods/' + this.editForm.goods_id, {
          goods_name: this.editForm.goods_name,
          goods_price: this.editForm.goods_price,
          goods_weight: this.editForm.goods_weight,
          goods_number: this.editForm.goods_number
        })
        console.log(res)
      })
    },
    // 重置对话框
    resetEdit () {
      this.$refs.editFormRef.resetFields()
    }
  }
}
</script>

<style scoped lang='less'>

</style>
